import React, { Component } from 'react';
// Component 父类，基类  extends：继承
class Coma extends Component {
  // 构造函数
  constructor() {
    super();
    // state：状态机，状态就是数据的值。类似组件的data
    this.state = {
      name: '冬泳怪鸽',
      age: 18,
      arr: [1,2,3,4]
    }
  }
  changeAge() {
    // this.state.age++ 直接修改数据，指挥出发数据的更新，页面不变
    let num = this.state.age+1;
    // setState是一个函数，不仅可以修改数据，还会更新页面
    // setState是异步函数，如果想获取最新的值，可以通过第二个参数实现。第二个参数数回调函数，会在页面更新后自动执行
    this.setState({
      age: num
    }, ()=>{
      console.log('新的：', this.state.age);
    })
    console.log(this.state.age);
  }
  addArr() {
    let arr1 = this.state.arr;
    arr1.push(5)
    this.setState({
      arr: arr1
    })
  }
  render() {
    return (
      <div>
        <p>react声明组件的方式：1.函数组件2.类组件</p>
        <p>类组件和函数组件的区别：1.类组件有数据状态、有生命周期、有this；函数组件没有</p>
        <p>类组件和函数组件的区别：2.类组件性能不如函数组件，函数组件适合做单纯的页面展示</p>
        <h1>name:{this.state.name}</h1>
        <h1>age:{this.state.age}</h1>
        <button onClick={()=>this.changeAge()}>年龄加1</button>
        <hr />
        <button onClick={()=>this.addArr()}>{this.state.arr.length}</button>
      </div>
    );
  }
}

export default Coma;
